<template>
    <view style="padding: 15px;">
        <u-form ref="validateFormRef" :model="validateForm.value" :label-width="150">
            <u-form-item label="验证码" prop="identifyingCode" required>
                <u-input placeholder="请输入验证码" v-model="validateForm.value.identifyingCode" type="text"></u-input>
                <u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
            </u-form-item>
        </u-form>

        <u-button type="error" @click="submit">下一步</u-button>
        <!--邮箱验证码-->
        <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
    </view>
</template>

<script>

    import {TbEmailIdentifyingCodeService} from "@/dev/services/tb_email_identifying_code.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";

    export default {
        data() {
            return {
                codeTips: '',  // 获取验证码提示语
                validateForm: {
                    value: {
                        email: this.globalVariable.userInfo.email,
                        identifyingCode: ''
                    },
                    rules: {
                        email: [
                            {required: true, type: "email", message: '请输入有效的邮箱号码', trigger: ['change', 'blur']},
                        ],
                        identifyingCode: [
                            {required: true, message: '请输入邮箱验证码', trigger: ['change', 'blur']},
                            {
                                trigger: ['blur'],
                                asyncValidator: (rule, value, callback) => {
                                    new TbEmailIdentifyingCodeService().mailIdentifyingCodeCheck(this.validateForm.value.email, this.validateForm.value.identifyingCode).then(result => {
                                        if (result.status === "success") {
                                            callback()
                                        } else {
                                            callback(new Error('输入的邮箱验证码有误！'));
                                        }
                                    });
                                }
                            }
                        ]
                    }
                }
            }
        },
        onReady() {
            const _self = this

        },
        methods: {
            codeChange(text) {
                this.codeTips = text;
            },
            // 获取验证码
            getCode() {
                const _self = this;
                if (this.$refs.uCode.canGetCode) {
                    // 模拟向后端请求验证码
                    uni.showLoading({
                        title: '正在获取验证码',
                        mask: true
                    });

                    new TbEmailIdentifyingCodeService().sendMailIdentifyingCode(this.validateForm.value.email).then(result => {
                        CommonUtil.alert(result.message);
                        uni.hideLoading();
                        // 通知验证码组件内部开始倒计时
                        _self.$refs.uCode.start();
                    });
                } else {
                    this.$u.toast('倒计时结束后再发送');
                }
            },
            submit() {
                const _self = this;
                this.$refs.validateFormRef.validate(valid => {
                    if (valid) {
                        console.log('验证通过', _self.validateForm.value);
                        _self.navigateTo(`/pages/sub/sub1-tabs/tabs/person/setting/setting-my-info/setting-my-info-alter-email-step1/setting-my-info-alter-email-step2/index?backPageNum=2`);
                    } else {
                        console.log('验证失败');
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
